<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>简单的响应式纯js消息通知插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<!--<link rel="stylesheet" type="text/css" href="css/normalize.css" />-->
	<!--<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">-->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="dist/notyf.min.css">
	<style type="text/css">
		html, body {
		  color: #333333;
		  background-color: #2C2B41;
		  -webkit-font-smoothing: antialiased;
		  -webkit-overflow-scrolling: touch;
		  width: 100%;
		  height: 100%;
		  margin: 0;
		  font-weight: 500;
		}

		.hero {
		  height: 100%;
		}
		.hero:before {
		  content: "";
		  height: 100%;
		  margin-right: -0.5em;
		  vertical-align: middle;
		  display: inline-block;
		}
		.hero h1 {
		  color: white;
		  font-size: 7em;
		  margin-top: 0;
		  margin-bottom: 25px;
		}
		.hero h2 {
		  color: white;
		  font-weight: 400;
		  line-height: 1.7em;
		}
		.hero .wrapper {
		  display: inline-block;
		  vertical-align: middle;
		  width: 100%;
		  text-align: center;
		}
		.hero .buttons {
		  margin-top: 45px;
		}
		.hero button {
		  cursor: pointer;
		  -webkit-appearance: none;
		     -moz-appearance: none;
		          appearance: none;
		  background: none;
		  border: 1px solid white;
		  color: white;
		  width: 90px;
		  outline: none;
		  height: 46px;
		  width: 170px;
		  font-size: 1.1em;
		  margin-left: 10px;
		  margin-right: 10px;
		  border-radius: 2px;
		}
		.hero button:hover {
		  background: white;
		  color: #2C2B41;
		}

		@media only screen and (max-width: 768px) {
		  .hero {
		    padding-left: 40px;
		    padding-right: 40px;
		  }
		  .hero h1 {
		    font-size: 4em;
		  }
		  .hero h2 {
		    font-size: 1em;
		  }
		  .hero button {
		    margin-bottom: 15px;
		  }
		}
		/* Small smartphones */
		@media only screen and (max-width: 360px) {
		  .hero {
		    padding-left: 40px;
		    padding-right: 40px;
		  }
		  .hero h1 {
		    font-size: 4em;
		  }
		  .hero h2 {
		    font-size: 1em;
		  }
		  .hero .buttons {
		    margin-left: -32px;
		    margin-right: -40px;
		  }
		  .hero button {
		    font-size: 0.9em;
		    margin-left: 3px;
		    margin-right: 3px;
		    height: 42px;
		    width: 130px;
		  }
		}
		/* iPhone 6+ ----------- */
		@media only screen and (min-width: 375px) and (max-width: 736px) {
		  .hero {
		    padding-left: 40px;
		    padding-right: 40px;
		  }
		  .hero h1 {
		    font-size: 5em;
		  }
		  .hero h2 {
		    font-size: 1.2em;
		  }
		  .hero button {
		    margin-left: 5px;
		    margin-right: 5px;
		    width: 145px;
		    font-size: 1em;
		  }
		}
	</style>
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>简单的响应式纯js消息通知插件 <span>A dead simple, responsive, vanilla javascript notification plugin</span></h1>
			<div class="htmleaf-links">
				<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
				<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Lightbox-Dialog/201609123990.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
			</div>
		</header>
		<div class="hero">
		      <div class="wrapper">
		        <h1>Notyf</h1>
		        <h2>A dead simple, responsive, vanilla javascript notification plugin. <br>No jQuery required.</h2>
		        <div class="buttons">
		          <button type="button" name="button" id="success-btn">Show success</button>
		          <button type="button" name="button" id="alert-btn">Show alert</button>
		        </div>
		      </div>
		</div>
		<div class="related">
		    <h3>如果你喜欢这个插件，那么你可能也喜欢:</h3>
		    <a href="http://www.htmleaf.com/html5/html5muban/201609033953.html">
			  <img src="related/1.jpg" width="300" alt="基于HTML5 Notifications API的消息通知插件"/>
			  <h3>基于HTML5 Notifications API的消息通知插件</h3>
			</a>
			<a href="http://www.htmleaf.com/jQuery/Lightbox-Dialog/201510022640.html">
			  <img src="related/2.jpg" width="300" alt="基于Animate.css的炫酷jQuery消息通知框插件"/>
			  <h3>基于Animate.css的炫酷jQuery消息通知框插件</h3>
			</a>
		</div>
	</div>
	
	<script src="dist/notyf.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		(function(){
		  var alertMessages = [
		    "I'm an alert",
		    "It's me again :D",
		    "Yep, I can stack on top of previous alerts",
		    "Let's start over"
		  ]
		  var currentAlert = 0;
		  var successMessages = [
		    "Hey there!",
		    "Success! Yuhu!!",
		    "It's me again :D",
		    "You can show me several times. I won't hide previous messages."
		  ]
		  var currentSuccess = 0;
		  var notyf = new Notyf({delay:3000});
		  document.addEventListener('DOMContentLoaded',function(){
		    document.getElementById('success-btn').addEventListener('click',function(){
		      if(currentSuccess>3){
		        currentSuccess = 0;
		      }
		      notyf.confirm(successMessages[currentSuccess]);
		      currentSuccess++;
		    });

		    document.getElementById('alert-btn').addEventListener('click',function(){
		      if(currentAlert>3){
		        currentAlert = 0;
		      }
		      notyf.alert(alertMessages[currentAlert]);
		      currentAlert++;
		    });
		  });
		})();
	</script>
</body>
</html>